<template>
  <div >
    <div class="box mb-3 shadow-sm border rounded bg-white profile-box text-center">
      <div class="py-4 px-3 border-bottom">
        <img style="width:50%;border:1px solid #007bff;" :src="userInfo.user_header" class="img-fluid mt-2 rounded-circle" alt="Responsive image">
        <h5 class="font-weight-bold text-dark mb-1 mt-4">{{userInfo.user_name}}</h5>
        <inputEditor style="height:40px" tip="你还没有编辑个性签名哦！" type="0" :maxlength="15"
          :editorText="userInfo.personalized_signature"></inputEditor>
        <inputEditor style="height:25px" title="职业" type="1" :maxlength="5"
          :editorText="userInfo.occupation"></inputEditor>
        <inputEditor style="height:25px" title="性别" type="2" :maxlength="5"
          :editorText="userInfo.sex"></inputEditor>
      </div>
      <div class="d-flex">
        <div class="col-6 border-right p-3">
          <h6 class="font-weight-bold text-dark mb-1">{{userInfo.page_view}}</h6>
          <p class="mb-0 text-black-50 small">访问</p>
        </div>
        <div class="col-6 p-3">
          <h6 class="font-weight-bold text-dark mb-1">{{userInfo.like_num}}</h6>
          <p class="mb-0 text-black-50 small">获赞</p>
        </div>

      </div>
      <div class="overflow-hidden border-top">
        <a class="font-weight-bold p-3 d-block" href="#" @click="logout"> 退  出 </a>
      </div>
    </div>
  </div>
</template>

<script>
import inputEditor from '../profileCommon/inputEditor.vue';

export default {
  props: {
    userInfo: {
      default: () => {},
    },
  },
  data() {
    return {

    };
  },
  components: {
    inputEditor,
  },
  methods: {
    logout() {
      localStorage.setItem("token", "");
      localStorage.setItem("userinfo", "");
      this.$store.commit("userInfoChange", {});
      this.$message.success("退出成功！");
      this.$router.push("/login");
    },
  },
};
</script>

<style scoped lang="scss">

</style>
